<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            background-color: orange;
            position: absolute;
            left: 25%;
            right: 25%;
            margin: auto;
        }

        .mtk {
            width: 300px;
            height: 300px;
            background-color: blue;
            line-height: 300px;
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: white;
            display: none;
            z-index: 1;
        }
        ul{
            list-style-type: none;
        }
        img{
            width: 20px;
            height: 20px;
        }
        span{
            margin-left: -12px;
        }
        .button1{
            margin-right: 5px;
        }
    </style>
    
</head>

<body>
    <div class="mtk">1245</div>
    <div>
        <p>姓名：<input class="inpt" type="text"></p>
        <p>手机号：<input class="inpt" type="text"></p>
        <p>评价：<input class="inpt" type="number">(0--5分)</p>
        <button onclick="add()">添加</button>
        <ul>
            <!-- <li><span>1.</span>姓名:d</li>
            <li>手机号:4</li>
            <li>评价: <img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""></li>
            <li>上传时间:2022-12-12 12:12:12</li>
            <li><button class="button1">上移</button><button class="button1">删除</button><button class="button1">下移</button></li> -->
        </ul>
        
    </div>
</body>

</html>
<script>
    var mtk = document.querySelector('.mtk')
    var namea = document.querySelectorAll('input')[0]
    var phone = document.querySelectorAll('input')[1]
    var grade = document.querySelectorAll('input')[2]
    var ul = document.querySelector('ul')
    function cun(arr){
        localStorage.setItem('data',JSON.stringify(arr))
    }
    function qu(){
        var shuju = localStorage.getItem('data')
        if(shuju!=null){
            return JSON.parse(shuju)
        }else{
            return []
        }
    }

    function tcmtk(into){
        //出现
        mtk.style.display = 'block'
        //赋值
        mtk.innerHTML=into;
        //两秒以后消失
        setTimeout(function(){
            mtk.style.display='none'
        },2000)
    }
    function add(){
        if(namea.value.trim()==''){
            tcmtk('用户名不能为空')
        }else{
            var arr = qu();
            arr.push({
                sj:new Date().toLocaleString().replaceAll('/','-'),
                namea:namea.value,
                phone:phone.value,
                grade:grade.value,
                id:+new Date(),
            })
            cun(arr);
            xr()
        }
    }
    function xr(){
        ul.innerHTML=''
        var arr = qu();
       
             for(var i=0;i<arr.length;i++){
            
                var li = document.createElement('li');
            li.innerHTML=`
            <li><span>${i+1}</span>姓名:${arr[i].namea}</li>
            <li>手机号:${arr[i].phone}</li>
            <li>评价: 
                ${arr[i].grade==0?'<img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}
                ${arr[i].grade==1?'<img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}
                ${arr[i].grade==2?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}
                ${arr[i].grade==3?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}
                ${arr[i].grade==4?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt="">':''}
                ${arr[i].grade==5?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt="">':''}
                </li>
            <li>上传时间:${arr[i].sj}</li>
            <li><button class="button1" ${disabled=i==0?'disabled':'0'} onclick="sy(${i})">上移</button><button onclick="sc(${i})" class="button1">删除</button><button ${disabled=i==arr.length-1?'disabled':'0'} class="button1" onclick="xy(${i})">下移</button></li>
            `
            ul.appendChild(li)
        }
    }
    xr()
    function sc(shan){
        var arr = qu();
        arr.splice(shan,1)
        cun(arr)
        xr()
    }
    function sy(index){
        var arr = qu();
        for(var i=0;i<arr.length;i++){
            if(index==i){
                var t = arr[index];
                arr[index]=arr[i-1];
                arr[i-1]=t;
            }
        }
        cun(arr);
        xr()
    }
    function xy(index){
        var arr = qu();
        for(var i=0;i<arr.length;i++){
            if(index==i){
                var t = arr[index];
                arr[index]=arr[i+1];
                arr[i+1]=t;
            }
        }
        cun(arr);
        xr()
    }
</script>